<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <a href="index.html">首页</a>
    <form action="" name="form1">
        <textarea name="acticle" id="" cols="30" rows="10"></textarea>
        用户名<input type="text" name="uname">
        密码<input type="password" name="pwd">
        <!-- <input type="submit" value="提交"> -->
       <input type="submit" value="提交" onclick="return validate()">
       <select name="area" id="">
           <option value="0">请选择</option>
           <option value="1">广州</option>
           <option value="2">上海</option>
           <option value="3">北京</option>
       </select>
    </form>
    <script>
        // 获取form元素
        var form1=document.forms['form1'];
        console.log(form1);
        var form2=document.forms[0];
        console.log(form2);
      
        var el=form1.elements
        console.log(el);  // 获取form元素的表单域元素 展示了3个INPUT

        var uname=el['uname'];//获取了用户名输入框
        var pwd=el['pwd'];
        var acticle=el['acticle'];
        var area=el['area'];
        console.log(uname);
        console.log(pwd);


        // 表单验证
        // 单个验证
        uname.onfocus=function(){
            console.log('获得焦点')
            uname.value="";
        }
        uname.onblur=function(){
            console.log("失去焦点");
            if(uname.value==""){
                alert("用户名不能为空")
            }
        }
        pwd.onfocus=function(){
            console.log('获得焦点')
            pwd.value="";
        }
        pwd.onblur=function(){
            console.log("失去焦点");
            if(pwd.value==""){
                alert("密码不能为空")
            }
        }
      
          // 同时验证
        // 方法1：<input type="submit" onclick="return validate();"/>
        // 方法2：<form action="" onsubmit="return validate();"/>
      
        function validate(){
            console.log(uname.value)
            console.log(pwd.value)
            // 层层拦截
            if(uname.value==''){
                alert('用户名不能为空')
                return false;
            }
            if(pwd.value==''){
                alert('密码不能为空')
                return false;
            }
            if(!/[a-zA-Z0-9]{6,}/.test(pwd.value)){
                alert('密码至少为6位数以上......')
                return false;
            }
            return true;
        }
        

        //获悉textarea里面的内容
        acticle.onchange=function(){
            console.log(acticle.value)
        }
        // 获悉下拉框值的变化
        area.onchange=function(){
            console.log(area.value)
        }
    </script>
</body>
</html>